<template>
  <base-panel>
    <top-simple-search
      @addFun="editAuth({})"
      @searchFun="getAppTokenList"
    ></top-simple-search>
      <simple-table ref="myTable">
      <el-table-column align="left" prop="app_name" label="调用应用名" show-tooltip-when-overflow min-width="120">
      </el-table-column>
      <el-table-column align="left" prop="token" label="token" width="300">
      </el-table-column>
      <el-table-column align="left" prop="ticket_sn_prefix" label="工单前缀">
      </el-table-column>
      <el-table-column
        align="left"
        prop="workflow_ids"
        label="工作流权限"
        :formatter="workFlowFormatter"
        min-width="120"
      >
      </el-table-column>
      <el-table-column align="left" label="创建人" width="130" prop="creator">
      </el-table-column>
      <el-table-column align="left" label="创建时间" width="200">
        <template slot-scope="{ row }">
          <span>{{ row.gmt_created }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" fixed="right" label="操作" width="100">
        <template slot-scope="{ row }">
          <edit-button @click="editAuth(row)"></edit-button>
          <delete-button @click="deleteAuth(row.id)"></delete-button>
        </template>
      </el-table-column>
      </simple-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="per_page"
      @pagination="getAppTokenList"
    />
    <add
      :visible.sync="addVisible"
      v-if="addVisible"
      @refreshList="getAppTokenList"
      :workflowsList="workflowsList"
      :row="currRow"
    ></add>
  </base-panel>
</template>

<script>
import authManagement from "@/api/systemManagement/workflowsManagement/authManagement/index";
import qs from "qs";
import add from "./add";
import api from "@/api/index";
export default {
  name: "index",
  components: {
    add
  },
  data() {
    return {
      addVisible: false,
      id: null,
      list: [],
      count: 0,
      page: 1,
      total: 0,
      per_page: 10,
      currRow: {},
      roleVisible: false,
      editVisible: false,
      ruleForm: {
        alias: "",
        dept_ids: "",
       // email: "",
        is_active: true,
        phone: "",
        type_id: 0,
        username: ""
      },
      formLabelWidth: "120px",
      rules: {
        dept_ids: "",
        // email: {
        //   required: true,
        //   message: "请输入邮箱",
        //   trigger: "blur"
        // },
        phone: {
          required: true,
          message: "请输入电话",
          trigger: "blur"
        },
        username: {
          required: true,
          message: "请输入用户姓名",
          trigger: "blur"
        },
        alias: {
          required: true,
          message: "请输入姓名",
          trigger: "blur"
        }
      },
      user_dept_info_list: [],
      workflowsList: [],
      loading: false
    };
  },
  created() {
    this.getWorkflowsList();
  },
  mounted() {
  },
  watch: {},
  methods: {
    workFlowFormatter(row) {
      let workflow_ids = row.workflow_ids;
      let resList = [];
      if (workflow_ids) {
        let list = workflow_ids.split(",");
        let that = this;
        list.forEach(id => {
          that.workflowsList.forEach(item => {
            if (item.id == id) {
              resList.push(item.name);
            }
          });
        });
      }
      return resList.join(",");
    },
    getWorkflowsList() {
      api.getWorkflows({ page: 1, per_page: 1000 }).then(res => {
          //console.log(res);
          this.workflowsList = res.data.value;
      });
    },
    getAppTokenList(queryData) {
      this.$refs["myTable"].searchList(queryData)
    },
    editAuth(row) {
      this.addVisible = true;
      this.currRow = row;
    },
    resetForm() {
      this.editVisible = false;
      this.$refs["ruleForm"].resetFields();
      // this.ruleForm = {
      //   alias: "",
      //   dept_ids: "",
      //   email: "",
      //   is_active: "",
      //   phone: "",
      //   type_id: null,
      //   username: ""
      // };
    },
    deleteAuth(id) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        authManagement.deleteAppToken(id).then(res => {
            this.msgSuccess("删除成功!");
            this.getAppTokenList();
        });
      });
      // api.deleteUser()
    }
  }
};
</script>

<style scoped>
.query {
  display: flex;
  align-items: center;
}
.text {
  width: 50px;
}
.query-btn {
  margin-left: 20px;
}
.add {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.page_fy {
  display: flex;
  justify-content: flex-end;
}
</style>
